<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #4cc9f0, #4361ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            color: #a5b1c2;
            font-size: 1.1rem;
        }
        
        .player-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        @media (min-width: 768px) {
            .player-container {
                flex-direction: row;
            }
        }
        
        .video-section {
            flex: 3;
            background: #0f3460;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 宽高比 */
        }
        
        #videoPlayer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
        }
        
        .video-controls {
            padding: 15px;
            background: rgba(15, 52, 96, 0.9);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        
        .control-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .progress-container {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .progress-bar {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(to right, #4cc9f0, #4361ee);
            border-radius: 3px;
            width: 0%;
        }
        
        .time-display {
            font-size: 0.9rem;
            color: #a5b1c2;
            min-width: 100px;
        }
        
        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .volume-slider {
            width: 80px;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }
        
        .volume-level {
            height: 100%;
            background: #4cc9f0;
            border-radius: 3px;
            width: 70%;
        }
        
        .playlist-section {
            flex: 1;
            background: #0f3460;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .playlist-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .playlist {
            list-style: none;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .playlist-item {
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .playlist-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .playlist-item.active {
            background: rgba(76, 201, 240, 0.2);
            border-left: 3px solid #4cc9f0;
        }
        
        .playlist-thumb {
            width: 60px;
            height: 40px;
            border-radius: 4px;
            background: #16213e;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #a5b1c2;
        }
        
        .video-info {
            padding: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .video-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
        }
        
        .video-description {
            color: #a5b1c2;
            line-height: 1.5;
        }
        
        .settings {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .quality-btn, .speed-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .quality-btn:hover, .speed-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .quality-btn.active, .speed-btn.active {
            background: #4cc9f0;
            color: #16213e;
        }
        
        /* 响应式调整 */
        @media (max-width: 767px) {
            .video-controls {
                flex-direction: column;
                align-items: stretch;
            }
            
            .progress-container {
                order: 1;
                width: 100%;
            }
            
            .control-btns {
                order: 2;
                display: flex;
                justify-content: center;
            }
            
            .volume-container {
                order: 3;
                width: 100%;
                justify-content: center;
            }
            
            .settings {
                order: 4;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>视频播放器</h1>
            <p class="subtitle">简洁美观的在线视频播放体验</p>
        </header>
        
        <div class="player-container">
            <div class="video-section">
                <div class="video-wrapper">
                    <video id="videoPlayer" poster="https://via.placeholder.com/800x450/0f3460/ffffff?text=视频封面">
                        您的浏览器不支持 HTML5 视频播放
                    </video>
                </div>
                
                <div class="video-controls">
                    <div class="control-btns">
                        <button class="control-btn" id="playPauseBtn">▶️</button>
                        <button class="control-btn" id="prevBtn">⏮️</button>
                        <button class="control-btn" id="nextBtn">⏭️</button>
                    </div>
                    
                    <div class="progress-container">
                        <span class="time-display" id="currentTime">0:00</span>
                        <div class="progress-bar" id="progressBar">
                            <div class="progress" id="progress"></div>
                        </div>
                        <span class="time-display" id="duration">0:00</span>
                    </div>
                    
                    <div class="volume-container">
                        <button class="control-btn" id="muteBtn">🔊</button>
                        <div class="volume-slider" id="volumeSlider">
                            <div class="volume-level" id="volumeLevel"></div>
                        </div>
                    </div>
                    
                    <button class="control-btn" id="fullscreenBtn">⛶</button>
                </div>
                
                <div class="video-info">
                    <h2 class="video-title" id="videoTitle">视频标题</h2>
                    <p class="video-description" id="videoDescription">视频描述信息将显示在这里。这是一个示例描述，实际应用中会替换为真实的内容。</p>
                    
                    <div class="settings">
                        <button class="quality-btn active">1080p</button>
                        <button class="quality-btn">720p</button>
                        <button class="quality-btn">480p</button>
                        <button class="speed-btn active">1.0x</button>
                        <button class="speed-btn">1.25x</button>
                        <button class="speed-btn">1.5x</button>
                    </div>
                </div>
            </div>
            
            <div class="playlist-section">
                <h3 class="playlist-title">播放列表</h3>
                <ul class="playlist" id="playlist">
                    <!-- 播放列表项将通过JavaScript动态生成 -->
                </ul>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const videoPlayer = document.getElementById('videoPlayer');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const progressBar = document.getElementById('progressBar');
            const progress = document.getElementById('progress');
            const currentTime = document.getElementById('currentTime');
            const duration = document.getElementById('duration');
            const muteBtn = document.getElementById('muteBtn');
            const volumeSlider = document.getElementById('volumeSlider');
            const volumeLevel = document.getElementById('volumeLevel');
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            const videoTitle = document.getElementById('videoTitle');
            const videoDescription = document.getElementById('videoDescription');
            const playlist = document.getElementById('playlist');
            
            // 视频数据
            const videos = [
                {
                    id: 1,
                    title: "美丽的海底世界",
                    description: "探索神秘的海底世界，欣赏各种美丽的海洋生物和珊瑚礁。",
                    src: "http://124.223.29.179:8083/Video.mp4",
                    thumbnail: "https://via.placeholder.com/60x40/16213e/ffffff?text=1"
                },
                {
                    id: 2,
                    title: "高山日出",
                    description: "壮丽的高山日出景色，云海翻腾，阳光洒满山峰。",
                    src: "https://example.com/video2.mp4",
                    thumbnail: "https://via.placeholder.com/60x40/16213e/ffffff?text=2"
                },
                {
                    id: 3,
                    title: "城市夜景",
                    description: "繁华都市的夜景，霓虹闪烁，车水马龙。",
                    src: "https://example.com/video3.mp4",
                    thumbnail: "https://via.placeholder.com/60x40/16213e/ffffff?text=3"
                },
                {
                    id: 4,
                    title: "森林漫步",
                    description: "宁静的森林漫步，鸟语花香，清新自然。",
                    src: "https://example.com/video4.mp4",
                    thumbnail: "https://via.placeholder.com/60x40/16213e/ffffff?text=4"
                },
                {
                    id: 5,
                    title: "星空延时摄影",
                    description: "壮观的星空延时摄影，银河璀璨，流星划过夜空。",
                    src: "https://example.com/video5.mp4",
                    thumbnail: "https://via.placeholder.com/60x40/16213e/ffffff?text=5"
                }
            ];
            
            let currentVideoIndex = 0;
            
            // 初始化播放列表
            function initPlaylist() {
                playlist.innerHTML = '';
                videos.forEach((video, index) => {
                    const li = document.createElement('li');
                    li.className = `playlist-item ${index === currentVideoIndex ? 'active' : ''}`;
                    li.innerHTML = `
                        <div class="playlist-thumb">${video.thumbnail ? `<img src="${video.thumbnail}" alt="${video.title}">` : '缩略图'}</div>
                        <div>
                            <div class="video-title-small">${video.title}</div>
                            <div class="video-duration">2:30</div>
                        </div>
                    `;
                    li.addEventListener('click', () => {
                        loadVideo(index);
                    });
                    playlist.appendChild(li);
                });
            }
            
            // 加载视频
            function loadVideo(index) {
                currentVideoIndex = index;
                const video = videos[index];
                
                // 更新视频源
                videoPlayer.src = video.src;
                
                // 更新视频信息
                videoTitle.textContent = video.title;
                videoDescription.textContent = video.description;
                
                // 更新播放列表高亮
                const items = playlist.querySelectorAll('.playlist-item');
                items.forEach((item, i) => {
                    if (i === index) {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });
                
                // 播放视频
                videoPlayer.play();
                playPauseBtn.textContent = '⏸️';
            }
            
            // 播放/暂停
            playPauseBtn.addEventListener('click', () => {
                if (videoPlayer.paused) {
                    videoPlayer.play();
                    playPauseBtn.textContent = '⏸️';
                } else {
                    videoPlayer.pause();
                    playPauseBtn.textContent = '▶️';
                }
            });
            
            // 上一个视频
            prevBtn.addEventListener('click', () => {
                let newIndex = currentVideoIndex - 1;
                if (newIndex < 0) newIndex = videos.length - 1;
                loadVideo(newIndex);
            });
            
            // 下一个视频
            nextBtn.addEventListener('click', () => {
                let newIndex = currentVideoIndex + 1;
                if (newIndex >= videos.length) newIndex = 0;
                loadVideo(newIndex);
            });
            
            // 更新进度条
            videoPlayer.addEventListener('timeupdate', () => {
                const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;
                progress.style.width = `${percent}%`;
                
                // 更新时间显示
                currentTime.textContent = formatTime(videoPlayer.currentTime);
                duration.textContent = formatTime(videoPlayer.duration);
            });
            
            // 点击进度条跳转
            progressBar.addEventListener('click', (e) => {
                const pos = (e.pageX - progressBar.getBoundingClientRect().left) / progressBar.offsetWidth;
                videoPlayer.currentTime = pos * videoPlayer.duration;
            });
            
            // 静音/取消静音
            muteBtn.addEventListener('click', () => {
                videoPlayer.muted = !videoPlayer.muted;
                muteBtn.textContent = videoPlayer.muted ? '🔇' : '🔊';
            });
            
            // 音量控制
            volumeSlider.addEventListener('click', (e) => {
                const pos = (e.pageX - volumeSlider.getBoundingClientRect().left) / volumeSlider.offsetWidth;
                const volume = Math.max(0, Math.min(1, pos));
                videoPlayer.volume = volume;
                volumeLevel.style.width = `${volume * 100}%`;
                
                if (volume === 0) {
                    videoPlayer.muted = true;
                    muteBtn.textContent = '🔇';
                } else {
                    videoPlayer.muted = false;
                    muteBtn.textContent = '🔊';
                }
            });
            
            // 全屏
            fullscreenBtn.addEventListener('click', () => {
                if (!document.fullscreenElement) {
                    videoPlayer.requestFullscreen().catch(err => {
                        console.log(`全屏请求错误: ${err.message}`);
                    });
                } else {
                    document.exitFullscreen();
                }
            });
            
            // 格式化时间
            function formatTime(seconds) {
                if (isNaN(seconds)) return "0:00";
                
                const minutes = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
            }
            
            // 视频结束时自动播放下一个
            videoPlayer.addEventListener('ended', () => {
                let newIndex = currentVideoIndex + 1;
                if (newIndex >= videos.length) newIndex = 0;
                loadVideo(newIndex);
            });
            
            // 初始化
            initPlaylist();
            loadVideo(0);
            
            // 设置初始音量
            videoPlayer.volume = 0.7;
            volumeLevel.style.width = '70%';
        });
    </script>
</body>
</html>